<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <button-counter title="点击" @chicknow="chicknow"></button-counter>
  <test></test>
</div>

<script>
  Vue.component("button-counter",{
    data:function (){
      return{
        count:0
      }
    },
    props:["title"],
    template:'<div><h1>h1..</h1><button v-on:click="clickfun">{{title}}数量 : {{count}}</button></div>',
    methods:{
      clickfun:function () {
        this.count++;
        this.$emit('chicknow',this.count);
      }
    }
  })

  var vr = new Vue({
    el:"#app",
    data:{

    },
    methods:{
      chicknow:function (count) {
        console.log(count);
      }
    },
    components:{
      test:{
        template: '<h1>局部注册</h1>'
      }
    }
  })

</script>

</body>
</html>
